function ColorPicker(id) {
	this.id = id;
	this.obj = $(this.id);
	this.attachEvent();
}
ColorPicker.prototype.attachEvent = function() {
	var tht=this;
	if(this.obj.addEventListener)
		this.obj.addEventListener('click', function(){tht.assignLayout(tht);}, false);
	else
		this.obj.attachEvent('onclick', function(){tht.assignLayout(tht);});
}
ColorPicker.prototype.assignLayout = function() {
	this.currDisLay = this.id;
	this.buildLayout();
}
ColorPicker.prototype.buildLayout = function() {
	var that=this;
	function offset(){
		var t=0, l=0, o=$(that.id);
		do {
	      t += o.offsetTop  || 0;
	      l += o.offsetLeft || 0;
	      o = o.offsetParent;
	    } while (o);
		//alert(t+'/'+l);
		//alert($(this.id).cumulativeOffset());
		return [t,l,$(that.id).offsetWidth];
	}
	var offset = offset();
	var layout = null;
	if(this.layoutBuiltFlag){alert('get');
		layout = $("colorLayDiv");
	}
	else{alert('set');
		layout = document.createElement("div");
		layout.id='colorLayDiv';
		layout.style.position='absolute';
		layout.style.width='200px';
		layout.style.height='200px';
		layout.style.background='red';
		document.body.appendChild(layout);
		this.layoutBuiltFlag=true;
	}	
	layout.style.top=offset[0];
	layout.style.left=offset[1]+offset[2];
	alert(layout.outerHTML);
}
ColorPicker.currDisLay = 0;
ColorPicker.layoutBuiltFlag = false;
